
<template>
  <div id="app">
     <el-tabs v-model="activeTab" type="card" style="width: 100%;border: none;height: 100%;">
      <el-tab-pane label="平台专送设置" name="healthArchives" >
        <el-card style="border-color: white">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="应用范围">
                <el-input v-model="formInline.applyy" placeholder="请输入关键词"></el-input>
              </el-form-item>

              <el-form-item label="使用状态">
                <el-select v-model="formInline.status" placeholder="全部状态" clearable>
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="已禁用" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="findPage()">查询</el-button>
              </el-form-item>
          </el-form>

          <!--表格用来展示数据-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="applyy"
          label="应用范围"
      >
      </el-table-column>

      <el-table-column
          prop="distancee"
          label="基础距离"
      >
      </el-table-column>

      <el-table-column
          prop="deliverycharge"
          label="基础配送费"
      >
      </el-table-column>

      <el-table-column
          prop="perhectometer"
          label="每百米计费"
      >
      </el-table-column>

      <el-table-column
          prop="farthestt"
          label="最远配送距离"
      >
      </el-table-column>

      <el-table-column
          prop="onezhithree"
          label="0~3点加价"
      >
      </el-table-column>

      <el-table-column
          prop="threezhisix"
          label="3~6点加价"
      >
      </el-table-column>

      <el-table-column
          prop="badnesss"
          label="恶劣天气加价"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态"
      >
        <template slot-scope="scope">
          {{scope.row.status==1?"正常":"已禁用"}}
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
<!--          <el-button type="text" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>-->
<!--          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,2)" size="mini">解绑定</el-button>-->
<!--          <el-button type="text" @click="yujing(scope.row.id)" size="mini">预警设置</el-button>-->
<!--&lt;!&ndash;          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,1)" size="mini">绑定</el-button>&ndash;&gt;-->
<!--          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="恶劣天气设置" name="2" >
          <el-card style="border-color:white">
            <el-form :inline="true" :model="formInline2" class="demo-form-inline">
              <el-form-item label="应用范围">
                <el-input v-model="formInline2.applyy" placeholder="请输入关键词"></el-input>
              </el-form-item>

              <el-form-item label="恶劣天气">
                <el-select v-model="formInline2.weatherr" placeholder="全部天气" clearable>
                  <el-option label="台风" value="台风"></el-option>
                  <el-option label="暴雨" value="暴雨"></el-option>
                  <el-option label="高温" value="高温"></el-option>
                  <el-option label="寒冷" value="寒冷"></el-option>
                  <el-option label="大雾" value="大雾"></el-option>
                  <el-option label="灰霾" value="灰霾"></el-option>
                  <el-option label="冰雹" value="冰雹"></el-option>
                  <el-option label="雷雨大风" value="雷雨大风"></el-option>
                  <el-option label="道路结冰" value="道路结冰"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="广播消息">
                <el-input v-model="formInline2.msg" placeholder="请输入关键词"></el-input>
              </el-form-item>

              <el-form-item label="创建时间">
                 <el-select v-model="formInline2.ctime" placeholder="全部" clearable>
                   <el-option label="近三个月" value="1"></el-option>
                   <el-option label="今年内" value="2"></el-option>
                   <el-option label="2022年" value="2"></el-option>
                   <el-option label="2021年" value="2"></el-option>
                   <el-option label="2020年以前" value="2"></el-option>
                 </el-select>
               </el-form-item>

              <el-form-item label="天气状态">
                <el-select v-model="formInline2.status" placeholder="全部状态" clearable>
                  <el-option label="未生效" value="1"></el-option>
                  <el-option label="生效中" value="2"></el-option>
                  <el-option label="已结束" value="3"></el-option>
                  <el-option label="已停用" value="4"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="findPage2()">查询</el-button>
              </el-form-item>
          </el-form>

          <!--表格用来展示数据-->
    <el-table
        :data="tableData2"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
      >
      </el-table-column>

      <el-table-column
          prop="applyy"
          label="应用范围"
      >
      </el-table-column>

      <el-table-column
          prop="weatherr"
          label="恶劣天气"
      >
      </el-table-column>

      <el-table-column
          prop="msg"
          label="广播消息"
      >
      </el-table-column>

      <el-table-column
          prop="stime"
          label="生效时间"
      >
      </el-table-column>

      <el-table-column
          prop="ctime"
          label="创建时间"
      >
      </el-table-column>

      <el-table-column
          prop="status"
          label="状态"
      >
        <template slot-scope="scope">
          {{scope.row.status==1?"未生效":scope.row.status==2?"生效中":scope.row.status==3?"已结束":"已停用"}}
        </template>
      </el-table-column>

      <el-table-column
          label="操作">
        <template slot-scope="scope">
<!--          <el-button type="text" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>-->
<!--          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,2)" size="mini">解绑定</el-button>-->
<!--          <el-button type="text" @click="yujing(scope.row.id)" size="mini">预警设置</el-button>-->
<!--&lt;!&ndash;          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,1)" size="mini">绑定</el-button>&ndash;&gt;-->
<!--          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页展示数据-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum2"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2">
    </el-pagination>
          </el-card>
      </el-tab-pane>

       <el-tab-pane label="骑手薪资设置" name="3" >
          <el-card style="border-color:white">
            <el-form :inline="true" :model="formInline3" class="demo-form-inline">
              <el-form-item label="应用范围">
                <el-input v-model="formInline3.applyy" placeholder="请输入关键词"></el-input>
              </el-form-item>

              <el-form-item label="使用状态">
                <el-select v-model="formInline3.status" placeholder="全部状态" clearable>
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="已禁用" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="findPage3()">查询</el-button>
              </el-form-item>
          </el-form>
            <h2 style="float: left;">薪资类型：</h2>
            <el-tabs v-model="activeTab2" type="card" style="width: 100%;border: none">
              <el-tab-pane label="全职薪资设置" name="healthArchives2" >
                <el-card style="border-color: white">
                  <el-table
                      :data="tableData3"
                      border
                      style="width: 100%">
                    <el-table-column
                        prop="id"
                        label="编号"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="applyy"
                        label="应用范围"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="typee"
                        label="骑手类型"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="wayy"
                        label="结算方式"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="basicpay"
                        label="基本工资"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="telephonebill"
                        label="话费补助"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="min"
                        label="最低订单量"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="chaothreehundred"
                        label="超1~300单奖励"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="sixhundred"
                        label="超301~600单奖励"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="sixhundreds"
                        label="超600单以上奖励"
                    >
                    </el-table-column>

                    <el-table-column
                        prop="status"
                        label="状态"
                    >
                      <template slot-scope="scope">
                        {{scope.row.status==1?"正常":"已禁用"}}
                      </template>
                    </el-table-column>

                    <el-table-column
                        label="操作">
                      <template slot-scope="scope">
                        <!--          <el-button type="text" @click="toUpdate(scope.row.id)" size="mini">修改</el-button>-->
                        <!--          <el-button type="text" v-if="scope.row.status==1" @click="zhuangtai(scope.row.id,2)" size="mini">解绑定</el-button>-->
                        <!--          <el-button type="text" @click="yujing(scope.row.id)" size="mini">预警设置</el-button>-->
                        <!--&lt;!&ndash;          <el-button type="text" v-if="scope.row.status==2" @click="zhuangtai(scope.row.id,1)" size="mini">绑定</el-button>&ndash;&gt;-->
                        <!--          <el-button type="text" @click="del(scope.row.id)" size="mini">删除</el-button>-->
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="兼职薪资设置" name="healthRecords" >
                <el-card style="border-color:white">

                </el-card>
              </el-tab-pane>
            </el-tabs>
          </el-card>
      </el-tab-pane>

       <el-tab-pane label="骑手补贴设置" name="4" >
          <el-card style="border-color:white">

          </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style >
.xl{
  width: 600px;
  height: 220px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.xy{
  width: 600px;
  height: 220px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.bs{
  width: 600px;
  height: 200px;
  //border: 1px solid red;
  margin-left: 100px;
  margin-bottom: 10px;
  line-height: 30px;
  font-size: 14px;
  //text-align: center;
}
.el-input{
  width:180px;
  margin-left: 40px;
}
</style>

<script>
// @ is an alias to /src
import axios from "axios"

export default {
  data(){
    return{
      activeTab: 'healthArchives',
      activeTab2: 'healthArchives2',
      /*
        data:就是用来定义数据的要用什么就自己定义什么
        []:数组，集合
        {}:对象(里面有属性)
         */
      tableData:[],
      tableData2:[],
      tableData3:[],
      pageNum:1,
      pageNum2:1,
      pageSize:10,
      pageSize2:10,
      total:0,
      total2:0,
      formInline:{},
      formInline2:{},
      formInline3:{},
      user:{},
      roomList:[],
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      tx:[],
      ruleForm:{},
      ruleForm2:{},
      // ruleForm:{},
      imageUrl:"",
      value1:[],
      yid:null,
    }
  },
  methods: {
    /*！！！！！！！！！！！
    methods:这个里面定义的全部都是方法
    现在是spring boot+vue 框架
    不一样的就是在 从vue框架里面的methods里面
    通过方法去请求路径(请求的路径就是后台的路径)
    拿到数据放到下面的created()里面来加载数据才能在页面展示

    ***html使用ajxa 请求controller  controller把数据返回给前端 不再去跳转页面了***

     */
    findPage() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-user-login/xm-distribution/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.formInline).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    findPage2() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-user-login/xm-distribution-weather/findPage2?pageNum=${this.pageNum2}&pageSize=${this.pageSize2}`, this.formInline2).then(res => {
        console.log(res.data);
        this.tableData2 = res.data.data.records;
        this.total2 = res.data.data.total;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    findPage3() { //查询所有加分页参数
      this.axios.post(`http://localhost:8000/xm-user-login/xm-distribution-pay/findPage3`, this.formInline3).then(res => {
        console.log(res.data);
        this.tableData3 = res.data.data;
        // if (this.pageNum>res.data.data.pages){
        //   this.pageNum=res.data.data.pages;
        //   this.findPage();
        // }
      })
    },
    handleCurrentChange(val) {//分页方法
      this.pageNum = val;
      this.findPage();
    },
    resetForm(formName) { //重置按钮点击可以重置
      this.$refs[formName].resetFields();
    },

  },
  created() {
    this.findPage();//展示所有的数据
    this.findPage2();//展示所有的数据
    this.findPage3();//展示所有的数据
  }
}
</script>
